<template>
  <view class="chat-container">
    <!-- 顶部导航栏 -->
    <!-- <view class="nav-bar">
      <view class="nav-left" @tap="handleNavBack">
        <text class="nav-icon">←</text>
      </view>
      <view class="nav-title">AI 健康助手</view>
      <view class="nav-right" @tap="toggleDarkMode">
        <text class="theme-icon">{{ isDarkMode ? '☀️' : '🌙' }}</text>
      </view>
    </view> -->

    <!-- 聊天消息区域（固定高度，独立滚动） -->
    <view class="messages-wrapper">
      <scroll-view 
        class="chat-messages" 
        scroll-y 
        :scroll-top="scrollTop"
        :refresher-enabled="true"
        @refresherrefresh="onRefresh"
        :refresher-triggered="isRefreshing"
        enhanced
        :show-scrollbar="false"
        @scrolltoupper="loadMoreMessages"
      >
        <!-- 欢迎卡片 -->
        <view class="welcome-card" v-if="messages.length === 1">
          <view class="welcome-title">欢迎使用AI健康助手</view>
          <view class="welcome-text">我可以帮您分析健康数据、提供健康建议，随时为您解答健康相关问题。</view>
          <view class="welcome-examples">
            <text class="example-label">您可以尝试问我：</text>
            <view class="example-items">
              <view class="example-item" @tap="handleSuggestionTap('分析我的健康数据')">
                <text class="example-icon">📊</text>
                <text class="example-text">分析我的健康数据</text>
              </view>
              <view class="example-item" @tap="handleSuggestionTap('最近的身体状况如何？')">
                <text class="example-icon">💓</text>
                <text class="example-text">最近的身体状况如何？</text>
              </view>
              <view class="example-item" @tap="handleSuggestionTap('如何改善睡眠质量？')">
                <text class="example-icon">💤</text>
                <text class="example-text">如何改善睡眠质量？</text>
              </view>
            </view>
          </view>
        </view>

        <view 
          v-for="(message, index) in messages" 
          :key="index"
          :class="['message', message.type, {'first-message': index === 0}]"
          @tap="handleMessageTap(message)"
          @longpress="copyMessageContent(message.content)"
        >
          <view class="message-content">
            <view class="avatar-wrapper">
              <image 
                class="avatar" 
                :src="message.type === 'user' ? '/static/images/user-avatar.png' : '/static/images/ai-avatar.png'"
                mode="aspectFill"
              />
            </view>
            <view class="message-bubble">
              <view class="text">{{ message.content }}</view>
              <view class="message-time">{{ formatMessageTime(message.time || new Date()) }}</view>
            </view>
          </view>
        </view>
        
        <!-- 加载提示 -->
        <view v-if="isLoading" class="message ai">
          <view class="message-content">
            <view class="avatar-wrapper">
              <image 
                class="avatar" 
                src="/static/images/ai-avatar.png"
                mode="aspectFill"
              />
            </view>
            <view class="message-bubble typing">
              <view class="loading-dots">
                <view class="dot"></view>
                <view class="dot"></view>
                <view class="dot"></view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 底部区域（固定定位，不影响聊天内容滚动） -->
    <view class="bottom-area">
      <!-- 快捷输入按钮 - 只在未聚焦且显示建议时显示 -->
      <view 
        class="suggested-buttons-wrapper" 
        v-if="showSuggestions && !isInputFocused"
      >
        <scroll-view 
          scroll-x 
          class="suggested-buttons"
          :show-scrollbar="false"
          enhanced
        >
          <view class="suggestion-wrapper">
            <view 
              v-for="(suggestion, index) in visibleSuggestions" 
              :key="index"
              class="suggestion-btn"
              :class="{ 'active': suggestion === activeSuggestion }"
              @tap="handleSuggestionTap(suggestion)"
            >
              <text>{{ suggestion }}</text>
            </view>
          </view>
        </scroll-view>
      </view>

      <!-- 显示建议按钮 -->
      <view class="suggestion-toggle" @tap="toggleSuggestions">
        <text class="toggle-icon">{{ showSuggestions ? '收起建议' : '显示建议' }}</text>
      </view>

      <!-- 输入区域 -->
      <view class="input-area">
        <view class="input-wrapper" :class="{ 'input-focused': isInputFocused }">
          <textarea 
            v-model="userInput"
            class="input-box"
            :adjust-position="false"
            :cursor-spacing="20"
            :show-confirm-bar="false"
            :auto-height="true"
            :maxlength="-1"
            placeholder="请输入您的问题..."
            @confirm="sendMessage(userInput)"
            @focus="handleTextareaFocus"
            @blur="handleTextareaBlur"
          />
          <button 
            class="send-btn" 
            :class="{ 'active': userInput.trim() }"
            @tap="sendMessage(userInput)"
            :disabled="!userInput.trim()"
          >
            <text class="send-icon">发送</text>
          </button>
        </view>
      </view>
    </view>

    <!-- 长按提示 -->
    <view v-if="showLongPressHint" class="long-press-hint">
      {{ longPressHintText }}
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, computed, watch, nextTick } from 'vue';
import { useBindingStore } from '../../store/modules/useBindingStore';
import { post } from '../../utils/request';

const bindingStore = useBindingStore();
const userId = bindingStore.getCurBindingId;

// 获取系统信息
const systemInfo = uni.getSystemInfoSync();
const statusBarHeight = systemInfo.statusBarHeight || 0;
const windowWidth = systemInfo.windowWidth || 375;
const windowHeight = systemInfo.windowHeight || 667;
const rpxToPxScale = windowWidth / 750;
const safeAreaInsets = systemInfo.safeAreaInsets || { bottom: 0 };

// 状态管理
const messages = ref([]);
const userInput = ref('');
const isLoading = ref(false);
const scrollTop = ref(0);
const isRefreshing = ref(false);
const activeSuggestion = ref('');
const showSuggestions = ref(true);
const keyboardHeight = ref(0); // 键盘高度
const isKeyboardVisible = ref(false); // 键盘是否可见
const isInputFocused = ref(false); // 输入框是否聚焦

// 深色模式状态管理
const isDarkMode = ref(false);

// 切换深色模式
const toggleDarkMode = () => {
  isDarkMode.value = !isDarkMode.value;
  document.documentElement.classList.toggle('dark-mode', isDarkMode.value);
  // 保存用户偏好到存储
  uni.setStorageSync('dark-mode', isDarkMode.value);
};

// 计算底部区域高度
const bottomAreaHeight = computed(() => {
  const inputAreaHeight = 100; // 输入区域基础高度
  const suggestionsHeight = showSuggestions.value && !isInputFocused.value ? 80 : 0;
  const toggleHeight = 40;
  const safeArea = safeAreaInsets.bottom || 0;
  
  return inputAreaHeight + suggestionsHeight + toggleHeight + safeArea;
});

// 快捷输入建议
const suggestedInputs = [
  '分析我的健康数据',
  '给我提供健康建议',
  '最近的身体状况如何？',
  '如何改善睡眠质量？',
  '每日运动建议'
];

// 限制显示建议数量
const visibleSuggestions = computed(() => {
  return suggestedInputs.slice(0, 4); // 只显示4个建议
});

// 切换建议显示
const toggleSuggestions = () => {
  showSuggestions.value = !showSuggestions.value;
};

// 处理建议点击
const handleSuggestionTap = (suggestion) => {
  sendMessage(suggestion);
  // 点击后自动关闭建议
  showSuggestions.value = false;
};

// 格式化消息时间
const formatMessageTime = (date) => {
  const hours = date.getHours().toString().padStart(2, '0');
  const minutes = date.getMinutes().toString().padStart(2, '0');
  return `${hours}:${minutes}`;
};

// 自动滚动到底部
const scrollToBottom = () => {
  nextTick(() => {
    // 使用一个足够大的值确保滚动到底部
    scrollTop.value = 999999;
  });
};

// 发送消息
const sendMessage = async (content) => {
  if (!content.trim()) return;
  
  activeSuggestion.value = content;
  
  // 添加用户消息
  messages.value.push({
    type: 'user',
    content: content.trim(),
    time: new Date()
  });
  
  userInput.value = '';
  isLoading.value = true;
  
  // 每次添加消息后滚动到底部
  scrollToBottom();
  
  try {
    const data = {
      userId: userId || 1,
      userPrompt: content.trim() || "你好"
    };

    const res = await post('/ai/AIParseData', data, 'api/v1', { method: 'POST' });
    
    // 添加AI响应
    messages.value.push({
      type: 'ai',
      content: res.data || '抱歉，我暂时无法回答这个问题。',
      time: new Date()
    });
  } catch (error) {
    console.error('发送失败:', error);
    uni.showToast({
      title: '发送失败，请重试',
      icon: 'none'
    });
    messages.value.push({
      type: 'ai',
      content: '抱歉，发生了错误，请稍后重试。',
      time: new Date()
    });
  } finally {
    isLoading.value = false;
    activeSuggestion.value = '';
    // 滚动到底部
    scrollToBottom();
  }
};

// 加载更多消息
const loadMoreMessages = () => {
  console.log('加载更多历史消息');
  // 实际应用中，可以根据第一条消息的ID或时间戳，从服务器获取更早的消息
};

// 下拉刷新
const onRefresh = () => {
  isRefreshing.value = true;
  
  // 模拟加载历史消息
  setTimeout(() => {
    // 在数组开头添加一条历史消息
    const historyMessage = {
      type: 'ai',
      content: '这是一条历史消息，通过下拉刷新加载。',
      time: new Date(Date.now() - 86400000) // 1天前
    };
    
    messages.value.unshift(historyMessage);
    isRefreshing.value = false;
    
    // 提示用户
    uni.showToast({
      title: '历史消息加载成功',
      icon: 'none'
    });
  }, 1500);
};

// 处理键盘事件
const handleTextareaFocus = (e) => {
  isInputFocused.value = true;
  isKeyboardVisible.value = true;
  keyboardHeight.value = e.detail.height || 0;
  // 当输入框聚焦时，隐藏建议
  showSuggestions.value = false;
};

const handleTextareaBlur = () => {
  isInputFocused.value = false;
  isKeyboardVisible.value = false;
  keyboardHeight.value = 0;
};

// 监听消息变化，自动滚动到底部
watch(messages, () => {
  scrollToBottom();
}, { deep: true });

// 处理点击导航栏返回按钮
const handleNavBack = () => {
  uni.navigateBack({
    delta: 1,
    fail: () => {
      uni.switchTab({
        url: '/pages/index/index'
      });
    }
  });
};

// 消息点击事件
const handleMessageTap = (message) => {
  // 如果是长消息，可以展开/收起详情或执行其他操作
  console.log('消息点击:', message);
  
  // 为长消息添加展开/收起功能
  if (message.content && message.content.length > 100) {
    message.expanded = !message.expanded;
  }
};

// 复制消息内容
const copyMessageContent = (content) => {
  // 使用uni API复制文本
  uni.setClipboardData({
    data: content,
    success: () => {
      uni.showToast({
        title: '已复制到剪贴板',
        icon: 'none'
      });
    }
  });
};

onMounted(() => {
  // 获取之前的设置
  const savedDarkMode = uni.getStorageSync('dark-mode');
  
  // 如果有保存的设置，使用它
  if (savedDarkMode !== '') {
    isDarkMode.value = savedDarkMode;
    document.documentElement.classList.toggle('dark-mode', isDarkMode.value);
  } else {
    // 否则检查系统偏好
    const matchMedia = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)');
    if (matchMedia && matchMedia.matches) {
      isDarkMode.value = true;
      document.documentElement.classList.add('dark-mode');
    }
  }
  
  // 添加欢迎消息
  messages.value.push({
    type: 'ai',
    content: '您好！我是您的健康助手，请问有什么可以帮您？',
    time: new Date()
  });

  // 监听键盘高度变化
  if (uni.onKeyboardHeightChange) {
    uni.onKeyboardHeightChange(res => {
      keyboardHeight.value = res.height;
      isKeyboardVisible.value = res.height > 0;
      
      // 当键盘显示时，隐藏建议
      if (res.height > 0) {
        showSuggestions.value = false;
      }
    });
  }
  
  // 初始化后滚动到底部
  scrollToBottom();
});
</script>

<style lang="scss" scoped>
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f7f9fc;
  position: relative;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* 顶部导航栏样式 */
.nav-bar {
  height: 90rpx;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24rpx;
  background: linear-gradient(135deg, #3182ce 0%, #4fd1c5 100%);
  color: #fff;
  position: relative;
  z-index: 10;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.nav-left {
  width: 80rpx;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.nav-icon {
  font-size: 34rpx;
  font-weight: bold;
  padding: 10rpx;
}

.nav-title {
  font-size: 36rpx;
  font-weight: 600;
  letter-spacing: 0.02em;
  flex: 1;
  text-align: center;
  animation: pulse 2s infinite ease-in-out;
}

.nav-right {
  width: 80rpx;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
}

.nav-badge {
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  background-color: #fc8181;
  position: absolute;
  top: 10rpx;
  right: 10rpx;
  box-shadow: 0 0 8rpx rgba(252, 129, 129, 0.6);
  animation: pulse 2s infinite ease-in-out;
}

/* 消息区域包装器 - 会自动缩小以适应底部区域 */
.messages-wrapper {
  flex: 1;
  overflow: hidden;
  position: relative;
}

/* 聊天消息区域 - 现在有一个固定的高度 */
.chat-messages {
  height: 100%;
  padding: 30rpx;
  box-sizing: border-box;
}

/* 底部区域样式 - 固定高度，不会影响消息区域 */
.bottom-area {
  width: 100%;
  background-color: transparent;
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1rpx solid rgba(0, 0, 0, 0.04);
}

/* 建议按钮容器 - 完全透明背景 */
.suggested-buttons-wrapper {
  background-color: rgba(255, 255, 255, 0.3); /* 30%透明度 */
  padding: 16rpx 0;
  border-top: 1rpx solid rgba(224, 224, 224, 0.1);
  animation: slideUp 0.3s ease;
}

.suggestion-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10rpx 0;
  background-color: transparent; /* 完全透明 */
  border-top: 1rpx solid rgba(224, 224, 224, 0.1);
  border-bottom: 1rpx solid rgba(224, 224, 224, 0.1);
}

.toggle-icon {
  font-size: 24rpx;
  color: #3182ce;
  padding: 8rpx 20rpx;
  border-radius: 30rpx;
  background-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;

  &:active {
    transform: scale(0.97);
    box-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.1);
  }
}

.suggested-buttons {
  width: 100%;
  white-space: nowrap;
  padding: 0 30rpx;
  -webkit-overflow-scrolling: touch;
}

.suggestion-wrapper {
  display: flex;
  gap: 20rpx;
  justify-content: space-between;
  width: 100%;

  .suggestion-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 18rpx 36rpx;
    background: rgba(255, 255, 255, 0.7);
    border: 1rpx solid rgba(224, 231, 255, 0.4);
    border-radius: 40rpx;
    font-size: 28rpx;
    color: #4a5568;
    transition: all 0.2s ease;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
    white-space: nowrap;
    font-weight: 500;
    flex: 1;
    text-align: center;

    &:active {
      transform: scale(0.96);
      box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.1);
    }

    &.active {
      background: linear-gradient(135deg, #3182ce 0%, #4fd1c5 100%);
      color: #fff;
      box-shadow: 0 6rpx 16rpx rgba(49, 130, 206, 0.25);
      border-color: transparent;
      transform: translateY(-2rpx);
    }
  }
}

/* 输入区域 */
.input-area {
  padding: 20rpx 28rpx;
  padding-bottom: 28rpx;
  background-color: rgba(255, 255, 255, 0.3); /* 轻微透明 */
  backdrop-filter: blur(4px); /* 轻微模糊，让输入区更容易区分 */
}

.input-wrapper {
  display: flex;
  align-items: flex-end;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 28rpx;
  padding: 20rpx 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04), inset 0 0 0 1rpx rgba(224, 231, 255, 0.5);
  transition: all 0.3s ease;
  max-height: 40vh;
  overflow-y: auto;
  
  &.input-focused {
    box-shadow: 0 4rpx 20rpx rgba(49, 130, 206, 0.15), inset 0 0 0 2rpx rgba(49, 130, 206, 0.3);
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-5rpx);
  }
}

.input-box {
  flex: 1;
  min-height: 84rpx;
  max-height: 35vh;
  font-size: 30rpx;
  line-height: 1.6;
  padding: 4rpx 8rpx;
  color: #2d3748;
  background-color: transparent;
  
  &::placeholder {
    color: #a0aec0;
    font-weight: 300;
  }
}

.send-btn {
  margin-left: 24rpx;
  padding: 0 40rpx;
  height: 84rpx;
  line-height: 84rpx;
  background: #e2e8f0;
  color: #a0aec0;
  border-radius: 42rpx;
  font-size: 28rpx;
  font-weight: 500;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
  
  &::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 0;
    border-radius: 100%;
    transform: scale(1, 1) translate(-50%, -50%);
    transform-origin: 50% 50%;
  }
  
  &:active::after {
    animation: ripple 0.6s ease-out;
  }
  
  &.active {
    background: linear-gradient(135deg, #3182ce 0%, #4fd1c5 100%);
    color: #fff;
    box-shadow: 0 6rpx 16rpx rgba(49, 130, 206, 0.25);
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(
        90deg, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.2) 50%, 
        rgba(255, 255, 255, 0) 100%
      );
      animation: shine 2s infinite;
    }
  }
}

/* 欢迎卡片 */
.welcome-card {
  background: linear-gradient(135deg, #e6f7ff 0%, #e6fffa 100%);
  border-radius: 24rpx;
  padding: 30rpx;
  margin: 20rpx 0 40rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.05);
  border: 1rpx solid rgba(49, 130, 206, 0.1);
  animation: fadeIn 0.5s ease;
  position: relative;
  overflow: hidden;
  
  &::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
      circle,
      rgba(79, 209, 197, 0.1) 0%,
      rgba(49, 130, 206, 0.05) 50%,
      transparent 70%
    );
    transform: rotate(30deg);
    z-index: 0;
  }
  
  .welcome-title, .welcome-text, .welcome-examples {
    position: relative;
    z-index: 1;
  }
}

.welcome-title {
  font-size: 34rpx;
  font-weight: 600;
  color: #3182ce;
  margin-bottom: 16rpx;
}

.welcome-text {
  font-size: 28rpx;
  color: #4a5568;
  line-height: 1.6;
  margin-bottom: 24rpx;
}

.welcome-examples {
  margin-top: 20rpx;
}

.example-label {
  font-size: 26rpx;
  color: #718096;
  font-weight: 500;
  margin-bottom: 16rpx;
  display: block;
}

.example-items {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.example-item {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.5);
  padding: 14rpx 20rpx;
  border-radius: 16rpx;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
  
  &:active {
    transform: scale(0.98);
    background: rgba(255, 255, 255, 0.7);
  }
  
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg, 
      rgba(255, 255, 255, 0) 0%, 
      rgba(255, 255, 255, 0.2) 50%, 
      rgba(255, 255, 255, 0) 100%
    );
    transition: all 0.6s ease;
  }
  
  &:hover::after {
    left: 100%;
  }
}

.example-icon {
  font-size: 28rpx;
  margin-right: 12rpx;
}

.example-text {
  font-size: 26rpx;
  color: #4a5568;
}

.message {
  margin-bottom: 48rpx;
  animation: fadeIn 0.35s ease;
  transition: all 0.3s ease;
  
  &:hover, &:active {
    transform: translateX(0) scale(1.01);
  }
  
  &.user:hover, &.user:active {
    transform: translateX(-10rpx) scale(1.01);
  }
  
  &.ai:hover, &.ai:active {
    transform: translateX(10rpx) scale(1.01);
  }
  
  .message-content {
    display: flex;
    align-items: flex-start;
    gap: 20rpx;
    max-width: 95%;
    cursor: pointer; /* 增加可点击的视觉提示 */
  }
  
  .avatar-wrapper {
    width: 84rpx;
    height: 84rpx;
    border-radius: 50%;
    overflow: hidden;
    border: 2rpx solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
    
    .avatar {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover;
    }
  }
  
  .message-bubble {
    max-width: 80%;
    position: relative;
    transition: all 0.3s ease;
    
    &:active {
      transform: scale(0.98);
    }
    
    &.typing {
      min-width: 100rpx;
    }
    
    .text {
      padding: 24rpx 32rpx;
      border-radius: 24rpx;
      font-size: 30rpx;
      word-break: break-all;
      line-height: 1.6;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
      position: relative;
      transition: max-height 0.3s ease;
      overflow: hidden;
      max-height: 1000rpx; /* 默认高度 */
      
      &::before {
        content: '';
        position: absolute;
        top: 20rpx;
        width: 0;
        height: 0;
        border: 12rpx solid transparent;
      }
      
      &.collapsed {
        max-height: 200rpx;
        position: relative;
        
        &::after {
          content: '...点击展开';
          position: absolute;
          bottom: 0;
          right: 0;
          background: linear-gradient(transparent, rgba(255, 255, 255, 0.9) 70%);
          padding: 10rpx;
          color: #3182ce;
          font-size: 24rpx;
        }
      }
      
      &.expanded {
        max-height: 2000rpx;
      }
    }
    
    .message-time {
      font-size: 22rpx;
      color: #a0aec0;
      margin-top: 8rpx;
      text-align: right;
      padding-right: 10rpx;
    }
  }
  
  &.user {
    .message-content {
      flex-direction: row-reverse;
      margin-left: auto;
    }
    
    .message-bubble {
      .text {
        background: linear-gradient(135deg, #3182ce 0%, #4fd1c5 100%);
        color: #fff;
        border-top-right-radius: 8rpx;
        letter-spacing: 0.02em;
        
        &::before {
          right: -20rpx;
          border-left-color: #4fd1c5;
        }
      }
      
      .message-time {
        text-align: left;
        padding-left: 10rpx;
        padding-right: 0;
        color: rgba(160, 174, 192, 0.9);
      }
    }
  }
  
  &.ai {
    .message-bubble {
      .text {
        background: #fff;
        color: #2d3748;
        border-top-left-radius: 8rpx;
        letter-spacing: 0.01em;
        
        &::before {
          left: -20rpx;
          border-right-color: #fff;
        }
      }
    }
  }
}

.loading-dots {
  display: flex;
  align-items: center;
  padding: 24rpx 32rpx;
  background: #fff;
  border-radius: 24rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
  
  .dot {
    width: 14rpx;
    height: 14rpx;
    margin: 0 8rpx;
    background: linear-gradient(135deg, #3182ce 0%, #4fd1c5 100%);
    border-radius: 50%;
    animation: bounce 1.4s infinite ease-in-out;
    
    &:nth-child(1) { animation-delay: -0.32s; }
    &:nth-child(2) { animation-delay: -0.16s; }
  }
}

@keyframes bounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(14rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes ripple {
  0% {
    transform: scale(0, 0);
    opacity: 0.5;
  }
  20% {
    transform: scale(25, 25);
    opacity: 0.5;
  }
  100% {
    opacity: 0;
    transform: scale(40, 40);
  }
}

@keyframes shine {
  0% { left: -100%; }
  20% { left: 100%; }
  100% { left: 100%; }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* 设备适配 */
@media (max-height: 600px) {
  .suggested-buttons-wrapper {
    height: auto !important;
  }
  
  .input-box {
    max-height: 30vh;
  }
}

@media (max-width: 480px) {
  .message-bubble {
    max-width: 85% !important;
  }
  
  .suggestion-btn {
    padding: 14rpx 28rpx !important;
    font-size: 26rpx !important;
  }
  
  .chat-messages {
    padding: 24rpx;
  }
}

/* 适配深色模式 */
@media (prefers-color-scheme: dark) {
  .chat-container {
    background-color: #1a202c;
  }
  
  .welcome-card {
    background: linear-gradient(135deg, rgba(49, 130, 206, 0.15) 0%, rgba(79, 209, 197, 0.15) 100%);
    border: 1rpx solid rgba(49, 130, 206, 0.2);
    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
  }
  
  .welcome-title {
    color: #63b3ed;
  }
  
  .welcome-text {
    color: #e2e8f0;
  }
  
  .example-label {
    color: #a0aec0;
  }
  
  .example-item {
    background: rgba(45, 55, 72, 0.3);
    
    &:active {
      background: rgba(45, 55, 72, 0.5);
    }
  }
  
  .example-text {
    color: #e2e8f0;
  }
  
  .bottom-area {
    border-top: 1rpx solid rgba(255, 255, 255, 0.04);
  }
  
  .suggested-buttons-wrapper {
    background-color: rgba(26, 32, 44, 0.3);
    border-top: 1rpx solid rgba(45, 55, 72, 0.1);
  }
  
  .suggestion-toggle {
    background-color: transparent;
    border-top: 1rpx solid rgba(45, 55, 72, 0.1);
    border-bottom: 1rpx solid rgba(45, 55, 72, 0.1);
  }
  
  .toggle-icon {
    color: #63b3ed;
    background-color: rgba(45, 55, 72, 0.5);
  }
  
  .suggestion-btn {
    background: rgba(45, 55, 72, 0.5) !important;
    border-color: rgba(74, 85, 104, 0.2) !important;
    color: #e2e8f0 !important;
    
    &.active {
      background: linear-gradient(135deg, #3182ce 0%, #4fd1c5 100%) !important;
      border-color: transparent !important;
      color: #fff !important;
    }
  }
  
  .input-area {
    background-color: rgba(26, 32, 44, 0.3);
    backdrop-filter: blur(4px);
  }
  
  .input-wrapper {
    background: rgba(45, 55, 72, 0.6);
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1), inset 0 0 0 1rpx rgba(74, 85, 104, 0.5);
    
    &.input-focused {
      box-shadow: 0 4rpx 20rpx rgba(49, 130, 206, 0.25), inset 0 0 0 2rpx rgba(66, 153, 225, 0.5);
      background: rgba(45, 55, 72, 0.8);
    }
  }
  
  .input-box {
    color: #e2e8f0;
    
    &::placeholder {
      color: #a0aec0;
    }
  }
  
  .send-btn {
    background: #4a5568;
    color: #a0aec0;
  }
  
  .message.ai .message-bubble .text {
    background: #2d3748;
    color: #e2e8f0;
    
    &::before {
      border-right-color: #2d3748;
    }
  }
  
  .loading-dots {
    background: #2d3748;
  }
  
  .nav-bar {
    background: linear-gradient(135deg, #2c5282 0%, #285e61 100%);
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
  }
  
  .nav-badge {
    background-color: #fc8181;
    box-shadow: 0 0 8rpx rgba(252, 129, 129, 0.4);
  }
  
  .welcome-card {
    &::before {
      background: radial-gradient(
        circle,
        rgba(79, 209, 197, 0.08) 0%,
        rgba(49, 130, 206, 0.04) 50%,
        transparent 70%
      );
    }
  }
  
  .message .message-bubble .text.collapsed::after {
    background: linear-gradient(transparent, rgba(45, 55, 72, 0.9) 70%);
    color: #63b3ed;
  }
}

:global(.dark-mode) {
  .chat-container {
    background-color: #1a202c;
  }
  
  .welcome-card {
    background: linear-gradient(135deg, rgba(49, 130, 206, 0.15) 0%, rgba(79, 209, 197, 0.15) 100%);
    border: 1rpx solid rgba(49, 130, 206, 0.2);
    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
  }
  
  .welcome-title {
    color: #63b3ed;
  }
  
  .welcome-text {
    color: #e2e8f0;
  }
  
  .example-label {
    color: #a0aec0;
  }
  
  .example-item {
    background: rgba(45, 55, 72, 0.3);
    
    &:active {
      background: rgba(45, 55, 72, 0.5);
    }
  }
  
  .example-text {
    color: #e2e8f0;
  }
  
  .bottom-area {
    border-top: 1rpx solid rgba(255, 255, 255, 0.04);
  }
  
  .suggested-buttons-wrapper {
    background-color: rgba(26, 32, 44, 0.3);
    border-top: 1rpx solid rgba(45, 55, 72, 0.1);
  }
  
  .suggestion-toggle {
    background-color: transparent;
    border-top: 1rpx solid rgba(45, 55, 72, 0.1);
    border-bottom: 1rpx solid rgba(45, 55, 72, 0.1);
  }
  
  .toggle-icon {
    color: #63b3ed;
    background-color: rgba(45, 55, 72, 0.5);
  }
  
  .suggestion-btn {
    background: rgba(45, 55, 72, 0.5) !important;
    border-color: rgba(74, 85, 104, 0.2) !important;
    color: #e2e8f0 !important;
    
    &.active {
      background: linear-gradient(135deg, #3182ce 0%, #4fd1c5 100%) !important;
      border-color: transparent !important;
      color: #fff !important;
    }
  }
  
  .input-area {
    background-color: rgba(26, 32, 44, 0.3);
    backdrop-filter: blur(4px);
  }
  
  .input-wrapper {
    background: rgba(45, 55, 72, 0.6);
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1), inset 0 0 0 1rpx rgba(74, 85, 104, 0.5);
    
    &.input-focused {
      box-shadow: 0 4rpx 20rpx rgba(49, 130, 206, 0.25), inset 0 0 0 2rpx rgba(66, 153, 225, 0.5);
      background: rgba(45, 55, 72, 0.8);
    }
  }
  
  .input-box {
    color: #e2e8f0;
    
    &::placeholder {
      color: #a0aec0;
    }
  }
  
  .send-btn {
    background: #4a5568;
    color: #a0aec0;
  }
  
  .message.ai .message-bubble .text {
    background: #2d3748;
    color: #e2e8f0;
    
    &::before {
      border-right-color: #2d3748;
    }
  }
  
  .loading-dots {
    background: #2d3748;
  }
  
  .nav-bar {
    background: linear-gradient(135deg, #2c5282 0%, #285e61 100%);
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
  }
  
  .nav-badge {
    background-color: #fc8181;
    box-shadow: 0 0 8rpx rgba(252, 129, 129, 0.4);
  }
  
  .welcome-card {
    &::before {
      background: radial-gradient(
        circle,
        rgba(79, 209, 197, 0.08) 0%,
        rgba(49, 130, 206, 0.04) 50%,
        transparent 70%
      );
    }
  }
  
  .message .message-bubble .text.collapsed::after {
    background: linear-gradient(transparent, rgba(45, 55, 72, 0.9) 70%);
    color: #63b3ed;
  }
}

/* 主题图标 */
.theme-icon {
  font-size: 28rpx;
  padding: 10rpx;
  height: 40rpx;
  width: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
  
  &:active {
    transform: rotate(45deg);
  }
}

/* 下拉刷新样式自定义 */
:deep(.uni-scroll-view-refresher) {
  background-color: transparent;
  height: 120rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

:deep(.uni-scroll-view-refresh__spinner) {
  width: 60rpx;
  height: 60rpx;
  color: var(--primary-color, #3182ce);
}

/* 长按提示 */
.long-press-hint {
  position: fixed;
  left: 50%;
  bottom: 30rpx;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 10rpx 30rpx;
  border-radius: 30rpx;
  font-size: 24rpx;
  opacity: 0;
  animation: fadeInOut 2s ease-in-out forwards;
  z-index: 100;
}

@keyframes fadeInOut {
  0% { opacity: 0; transform: translate(-50%, 20rpx); }
  20% { opacity: 1; transform: translate(-50%, 0); }
  80% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -20rpx); }
}
</style>